PepSim.define('PepSim.Application', {

	version: '1.0',
	
	imageLeft: 0,
	
	image: 0,
	
	interval: 100,
	
	autoLoop: true,
	
	worldWidth: 200,

	worldHeight: 200,

	guiWidth: 300,
	
	actions: ["Create Feeder", "Create Food", "Create Pep", "Log Cell"],

	actionType: ["feeder", "food", "pep"],
	
	actionIndex: 0,
	
	items: [{
		type: 'button',
		name: 'start-button',
		top: 10,
		left: 50,
		width: 200,
		height: 40,
		text: 'Stop',
		handler: function (sender) {
			//var button = this.getItem('start-button');
			this.autoLoop = !this.autoLoop;
			if (this.autoLoop) {
				sender.text = 'Stop';
				this.loop();
		   } else {
				sender.text = 'Start';
		   }
		}
	},{
		type: 'button',
		top: 70,
		left: 50,
		width: 200,
		height: 40,
		text: 'Create Peps',
		handler: function (sender) {
			this.world.createPeps();
			this.drawWorld();
		}
	},{
		type: 'button',
		top: 130,
		left: 50,
		width: 200,
		height: 40,
		text: 'Create Food',
		handler: function (sender) {
			this.world.createFood();
			this.drawWorld();
		}
	},{
		type: 'button',
		top: 190,
		left: 50,
		width: 200,
		height: 40,
		text: 'Log peps',
		handler: function (sender) {
			this.logView = new PepSim.LogView(this);
		}
	},{
		type: 'button',
		top: 250,
		left: 50,
		width: 200,
		height: 40,
		text: 'Create Feeder',
		handler: function (sender) {
			//this.logView = new PepSim.LogView(this);
			this.actionIndex = this.actionIndex + 1;
			if (this.actionIndex >= this.actions.length) {
				this.actionIndex = 0;
			}
			sender.text = this.actions[this.actionIndex];
		}
	}],
			
	init: function () {
		var me = this;
	
		this.canvas = document.createElement('canvas');
		this.canvas.width = window.innerWidth;
		this.canvas.height = window.innerHeight;
		document.body.appendChild(this.canvas);	
		this.context = this.canvas.getContext('2d');
		
		this.world = new PepSim.World(this.worldWidth, this.worldHeight);
		
		this.guiLeft = this.canvas.width - this.guiWidth;
		
		this.hZoom = (this.canvas.width - this.guiWidth) / this.worldWidth;
		this.vZoom = this.canvas.height / this.worldHeight;
		
		this.canvas.addEventListener('click', function(event) {
		   me.handleCanvasClick.call(me, event.clientX - event.target.offsetLeft, event.clientY - event.target.offsetTop);
		});
	},
	
	getItem : function (name) {
		var item, i;
		if (this.items) {
			for (i = 0; i < this.items.length; i = i + 1) {
				if (this.items[i].name === name) {
					return this.items[i];
				}
			}
		}
	},
	
	closeLog : function () {
		this.logView = false;
		this.drawWorld();
	},
		
	handleCanvasClick: function (x, y) {
		var item, i;
		if (this.logView) {
			this.logView.handleCanvasClick(x, y);
		} else if (x >= 0 && y >= 0 && x <= this.world.width * this.hZoom && y <= this.world.height * this.vZoom) {
			if (this.actionIndex === 3) {
				console.dir(this.world.get(Math.floor(x / this.hZoom), Math.floor(y / this.vZoom)));
			} else {
				this.world.createItem(Math.floor(x / this.hZoom), Math.floor(y / this.vZoom), this.actionType[this.actionIndex]);
			}
		} else if (this.items) {
			for (i = 0; i < this.items.length; i = i + 1) {
				item = this.items[i];
				if (x >= (this.guiLeft + item.left) && x <= (this.guiLeft + item.left + item.width) && y >= item.top && y <= item.top + item.height) {
					if (item.handler) {
						item.highlight = 3;
						item.handler.call(this, item);
						break;
					}
				}
			}
		}
	},
	
	run: function () {
		this.loop();
	},
	
	loop: function () {
		var me = this;
		
		this.drawAll();
		
		window.setTimeout(function () {
			me.loop.call(me);
		}, this.interval);
	},

	drawAll: function () {
		if (this.autoLoop) {
			this.world.play();
			this.drawWorld();
		}
		this.drawGUI();
		if (this.logView) {
			this.logView.draw();
		}
	},
		
	drawGUI: function () {
		var i, item;
		// Clear canvas
		this.context.fillStyle = "#eeeeee";
		//this.context.fillRect(this.world.width * this.zoom, 0, this.canvas.width,  this.canvas.height);
		this.context.fillRect(this.guiLeft, 0, this.canvas.width,  this.canvas.height);
		
		if (this.items) {
			for (i = 0; i < this.items.length; i = i + 1) {
				item = this.items[i];
				if (item.type === "button") {
					this.drawButton(item);
				}
			}
		}
	},
	
	drawButton: function (config) {
		var offset;
		/*
		var gradient = this.context.createRadialGradient(75,50,5,90,60,100);
		gradient.addColorStop(0,"red");
		gradient.addColorStop(1,"white");
		this.context.fillStyle = gradient;		
		*/
		
		if (config.highlight) {
			offset = 1;
			config.highlight = config.highlight - 1;
		} else {
			offset = 3;
		}
		
		this.context.fillStyle = "#000000";
		this.context.fillRect(this.guiLeft + config.left, config.top, config.width, config.height);
		this.context.fillStyle = "#ff0000";
		this.context.fillRect(this.guiLeft + config.left + offset, config.top + offset, config.width, config.height);
		
		
		this.context.fillStyle = "#ffffff";
		this.context.font = "20px Lucida console";
		this.context.fillText(config.text, this.guiLeft + config.left + 10 + offset, config.top + (config.height/2) + 4 + offset);
	},
	
	drawWorld: function () {
		// Clear canvas
		this.context.fillStyle = "#000000";
		this.context.fillRect(0,0,this.world.width * this.hZoom, this.world.height * this.vZoom);
		
		this.world.entities.foreach(function (entity) {
			var energy = Math.floor(entity.energy || 0);
			if (entity.type === 'pep') {
				this.context.fillStyle = "rgba(" + energy + ", 0, 0, 255)";
				this.context.fillRect(entity.left * this.hZoom, entity.top * this.vZoom, this.hZoom, this.vZoom);
			} else if (entity.type === 'food') {
				this.context.fillStyle = "rgba(" + energy + ", " + energy + ", " + energy + ", 255)";
				//this.context.fillStyle = "rgba(255, 255, 255, 255)";
				this.context.fillRect(entity.left * this.hZoom, entity.top * this.vZoom, this.hZoom, this.vZoom);
			} else if (entity.type === 'feeder') {
				this.context.fillStyle = "rgba(255, 255, 0, 255)";
				this.context.fillRect(entity.left * this.hZoom, entity.top * this.vZoom, this.hZoom, this.vZoom);
			}
		}, this);		
	}

});

// Start the application
(function () {
	window.addEventListener('load',function(evento) {
	   var app = new PepSim.Application();
	   app.run();
	});
})();